<template>
    <div style="height:512px;display:flex;">
        <div id="container" ref="container" class="container beautiful-bar grid pandx">

            <template v-if="type==='insert'">
                <div class="fixed-legend" style="margin-right:210px;">
                    <div class="legend-wrapper">
                        <div class="legend-item">
                            <div class="legend" style="background-color: #2d8cf0;border:1px solid #2d8cf0;"></div>
                            <br>
                            开始节点
                        </div>
                        <div class="legend-item">
                            <div class="legend" style="background-color: #ff9900;border:1px solid #ff9900;"></div>
                            <br>
                            任务节点
                        </div>
                        <div class="legend-item">
                            <div class="legend" style="background-color: #808695;border:1px solid #808695;"></div>
                            <br>
                            结束节点
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="type==='detail'">
                <div class="fixed-legend" style="margin-right:165px;">
                    <div class="legend-wrapper">
                        <div class="legend-item">
                            <div class="legend" style="background-color: #eeeeee;border:1px solid #808695;"></div>
                            <br>
                            待审
                        </div>
                        <div class="legend-item">
                            <div class="legend" style="background-color: #19be6b;border:1px solid #19be6b;"></div>
                            <br>
                            同意
                        </div>
                        <div class="legend-item">
                            <div class="legend" style="background-color: #ff9900;border:1px solid #ff9900;"></div>
                            <br>
                            驳回
                        </div>
                        <div class="legend-item">
                            <div class="legend" style="background-color: #ed4014;border:1px solid #ed4014;"></div>
                            <br>
                            拒绝
                        </div>
                    </div>
                </div>
            </template>
            <template v-for="node in nodeList">
                <flow-node-view-only :id="node.id" :key="node.id" :node="node" :start-position="startPosition"></flow-node-view-only>
            </template>
            <div style="position:absolute;top: 2000px;">&nbsp;</div>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';

import {jsPlumb} from 'jsplumb';
import _ from 'lodash';
import Util from '@/lib/util';
import FlowNodeViewOnly from '@/components/flow/flow-node-view-only.vue';

@Component({
    components: {
        FlowNodeViewOnly,
    },
})
export default class FlowAreaViewOnly extends AbpBase {
    name: string = 'FlowAreaViewOnly';

    @Prop({type: String, default: ''}) type: string;

    jsPlumb: any = null;
    loadFinish: boolean = false;

    startPosition:number=0;
    data: string = '';
    nodeList: any[] = [];
    lineList: any[] = [];

    @Watch('data')
    dataChange(newVal, oldVal) {
        this.nodeList = JSON.parse(newVal).nodeList;
        this.lineList = JSON.parse(newVal).lineList;
        for (const node of this.nodeList) {
            if(node.type==='start'){
                this.startPosition=parseFloat(node.left);
            }
        }
        this.$nextTick(() => {
            this.jsPlumb.reset();
            this.jsPlumbInit();
        });

    }



    jsPlumbInit() {
        this.jsPlumb.ready(() => {
            this.jsPlumb.importDefaults(this.$config.jsPlumb.jsPlumbSetting);
            this.jsPlumb.setSuspendDrawing(false, true);
            this.load();
            this.jsPlumb.setContainer(this.$refs.container);
        });
    }

    load() {
        for (const node of this.nodeList) {
            this.jsPlumb.makeSource(node.id, _.merge(this.$config.jsPlumb.jsPlumbSourceOptions, {}));
            this.jsPlumb.makeTarget(node.id, this.$config.jsPlumb.jsPlumbTargetOptions);

        }
        for (const line of this.lineList) {
            const connectionParams = {
                source: line.from,
                target: line.to,
                label: line.label ? line.label : '',
            };

            this.jsPlumb.connect(connectionParams, this.$config.jsPlumb.jsPlumbConnectOptions);
        }
        this.$nextTick(() => {
            this.loadFinish = true;
        });
    }

    init() {
        this.$nextTick(() => {
            this.jsPlumb = jsPlumb.getInstance();
            this.$nextTick(() => {
                this.jsPlumbInit();
            });
        });
    }



    mounted() {
        this.init();
    }


    created() {

    }

}
</script>

<style lang="less" scoped>
@import './styles/flow-view-only.less';

.container::v-deep .jtk-hover {
    cursor: default;
}

.container::v-deep .flow-label {
    border-radius: 4px;
    background-color: #ffffff;
    padding: 4px 8px;
    font: 10px sans-serif;
    color: #515a6e;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px #dcdee2, 0 0 5px 4px rgba(0, 0, 0, 0.2);
}

.container::v-deep .flow-label-active {
    border-radius: 4px;
    background-color: #ffffff;
    padding: 4px 8px;
    font: 10px sans-serif;
    color: #515a6e;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px #19be6b, 0 0 5px 4px rgba(0, 0, 0, 0.2);
}
</style>
